Halogen HTML
HTML要素を表す関数群
e.g. HH.button, HH.div
Halogen Componentとは別物
Halogen HTMLは状態などは持てない
Halogen.HTML
2つの引数
attr, props, event handler
children
属性がないときはアンダーバー付きの関数を使えば省略できる
code:以下2つは同じ.purs
div_ children
div [] children
ちょっと気をつけるところ
code:purs(hs)
import Halogen.HTML as HH
import Halogen.HTML.Properties as HP
element :: forall w i. HH.HTML w i
element =
HH.div
HP.id "root"
[ HH.input
HP.placeholder "Name"
, HH.button
[ HP.classes HH.ClassName "btn-primary"
, HP.type_ HP.ButtonSubmit
]
HH.text "Submit"
]
htmlのclassはHP.classes []
HH.ClassNameというnewtypeを使う
ClassNameはHHにあるのは何でだろう #??
HPにあっても良い気がするんだけどmrsekut.icon
buttonのtypeもnewtypeを使う
何も考えてないとHP.type "submit"と書いちゃうmrsekut.icon
HH.inputはchildrenを取らない1引数関数
第2引数書くとコンパイルエラーになる
型
HH.HTML型
H.ComponentHTML型
PlainHTML型
DOM内のeventに応答しないHTMLの場合に使う
HH.HTML w iと書かずに、より制限の強いPlainHTMLを使う
ただし、fromPlainHTMLで変換しないといけない場合が出てくる
https://purescript-halogen.github.io/purescript-halogen/guide/01-Rendering-Halogen-HTML.html#componenthtml-and-plainhtml
使っているのを見たことがないmrsekut.icon
IProp
https://purescript-halogen.github.io/purescript-halogen/guide/01-Rendering-Halogen-HTML.html#iprop
HP.系のproperty関数を誤ったHTML要素に指定できないように働く
独自のカスタム要素を作るときのComponentとの関係が少し分かりづらい
状態を持たなければ、HTMLで作るのか?
Componentで作っても同様のことはできる
letとconstの使い分けの明示みたいな感じになるのか?
参考
Rendering Halogen HTML - Halogen Guide
公式docs